<!-- 该画面是：项目计划书项目的所有进度记录 -->
<template>
  <div>
    <div class="DescriptionTitle">{{ title }}</div>
    <!-- 项目进度记录 -->
    <el-table ref="table1" v-loading="loading" :data="projectProgressList" border :default-sort="{ prop: 'created_date', order: 'ascending' }">
      <el-table-column :label="$t('recordDate')" prop="created_date" sortable align="center" width="100" />
      <el-table-column :label="$t('reporter')" prop="user_name" width="100" />
      <el-table-column :label="$t('reportRecipient')" prop="report_recipient" width="250" />
      <el-table-column :label="$t('reportForm')" prop="report_form" align="center" width="80" />
      <el-table-column :label="$t('progressRecord')" prop="note" show-tooltip-when-overflow />
    </el-table>
  </div>
</template>
<script>
import { getProjectProjressListApi } from '@/views/project/projectprogress/api/projectprogress.api';

export default {
  name: 'ProjectProgressInfo',
  props: {
    title: {
      type: String,
      default: ''
    },
    projectPlanId: {
      required: true,
      type: Number
    }
  },
  data() {
    return {
      queryparams: {
        projectPlanFK: undefined
      },
      projectProgressList: [],
      loading: false
    };
  },
  mounted() {
    this.$watch(() => {
      return this.projectPlanId;
    }, async(newValue) => {
      this.queryparams.projectPlanFK = newValue;
      await this.getProjectProgressList();
    }, { immediate: true })
  },
  methods: {
    // 获取项目进度信息
    async getProjectProgressList() {
      this.loading = true
      this.queryparams.projectPlanFK = this.projectPlanId
      var resp = await getProjectProjressListApi({ ...this.queryparams })
      if (resp.success && resp.data.results.length > 0) {
        for (const item of resp.data.results) {
          const datetest = new Date(item.created_date);
          const year = datetest.getFullYear();
          const month = String(datetest.getMonth() + 1).padStart(2, '0'); // 月份从0开始，补零
          const day = String(datetest.getDate()).padStart(2, '0');
          item.created_date = `${year}-${month}-${day}`;
        }
        this.projectProgressList = resp.data.results
      } else {
        this.projectProgressList = []
      }
      this.loading = false
    }
  }
}
</script>

  <style scoped>
  .DescriptionTitle {
      margin: 10px 0;
      font-size: 16px;
  }

  .clearfix::after {
      content: "";
      clear: both;
      display: table;
  }

  div .DescriptionDiv {
      float: left;
      box-sizing: border-box;
      border-left: 10px solid transparent;
  }

  div .DescriptionWidth25 {
      width: 25%
  }

  div .DescriptionWidth50 {
      width: 50%
  }

  div .DescriptionWidth75 {
      width: 75%
  }

  div .DescriptionWidth100 {
      width: 100%
  }

  div .DescriptionDivMarginLeftRemove {
      margin-left: -10px;
  }

  .label-with-150 {
      width: 150px;
  }

  </style>
